<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="uploadify.css">
    <link rel="stylesheet" href="build/css/dropkick.css">
    <style type="text/css">
        .uploadify-queue-item .cancel a {
            background: url('uploadify-cancel.png') 0 0 no-repeat;
        }

        .btn-primary {
            color: #fff;
            background-color: #428bca;
            border-color: #357ebd;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        .dk-select, .dk-select-multi {
            width: 100px;
            line-height: 1.9em;
        }

        .shopManageRightContainer {
            width: 890px;
            font-family: 'microsoft yahei', Arial;
            font-size: 14px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
        }

        .shopManageRightContainer .shopManageOption {
            margin-top: 17px;
        }

        .shopManageRightContainer .shopManageTitle {
            width: 80px;
            float: left;
            color: rgb(67, 67, 67);
            height: 46px;
            line-height: 43px;
        }

        .shopManageRightContainer .shopManageContent {
            width: 800px;
            float: left;
        }

        #addressDetail {
            width: 279px;
            height: 37px;
            line-height: 37px;
            margin-right: 7px;
            border: 1px solid #d8d8db;
            text-indent: 7px;
            font-size: 14px;
        }

        input, textarea, select {
            border: none;
            outline: none /*;-webkit-user-modify:read-write-plaintext-only */
        }

        .shopManageOption .search-btn {
            width: 155px;
            height: 45px;
            line-height: 45px;
            background: #cd312d;
            border-radius: 2px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .explain {
            font-family: 'microsoft yahei', Arial;
            font-size: 14px;
            line-height: 28px;
        }

        .clear-float {
            clear: both;
        }

        .sure-position {
            width: 160px;
            height: 40px;
            line-height: 40px;
            margin: 5px auto;
            background: #cd312d;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }

        .shopInput {
            width: 279px;
            height: 37px;
            line-height: 37px;
            margin-right: 7px;
            border: 1px solid #d8d8db;
            text-indent: 7px;
            font-size: 14px;
        }

        .shop-tip {
            color: #999;
            font-size: 15px;
        }

        .shop-h3, .shop-h4 {
            margin: 0;
            padding: 0;
            font-weight: normal;
            list-style: none;
            font-style: normal;
        }

        .identity-photo > div {
            margin: 30px 0px 30px 84px;
        }
        .uploadify,.uploadify-queue{
            margin-top:20px;
            margin-left:15px;
        }
    </style>

    <script src="jquery.js"></script>
    <script type="text/javascript" src="jquery.uploadify.js"></script>
    <script type="text/javascript" src="build/js/dropkick.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=9AWkO508ejznfczgToGLxYqaN1Po4vYI&callback=aaa"></script>
    <script type="text/javascript">
        var provinceSelect, citySelect, areaSelect;
        var map, marker;
        $(function () {
            // 百度地图API功能
            map = new BMap.Map("map");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.addControl(new BMap.NavigationControl());//左上角，添加默认缩放平移控件
            var markerWindowContent = "<p>使用此位置作为门店定位？</p><div class='sure-position' onclick='surePosition()'>保存门店位置</div>";
            var markerWindow = new BMap.InfoWindow(markerWindowContent);  // 创建信息窗口对象
            var myGeo = new BMap.Geocoder();

            $(".upload-btn").uploadify({
                height: 15,
                swf: 'uploadify.swf',
                uploader: 'uploadify.php',
                buttonText: '选择文件',
                'fileTypeExts' : '*.gif; *.jpg; *.jpeg; *.bmp',
                width: 60,
                auto: false,
                fileSizeLimit : '2MB',
                queueSizeLimit: 1,
                onInit: function () {
                    $('.uploadify-button').addClass('btn btn-primary').css("-webkit-box-sizing", "content-box").css("box-sizing", "content-box");
                    $('.uploadify-button').siblings('object').css("height", $('.uploadify-button').outerHeight());
                    $('.uploadify-button').siblings('object').css("width", $('.uploadify-button').outerWidth());
                }
            });

            provinceSelect = new Dropkick("#provinceSelect", {
                change: function () {
                    map.removeOverlay(marker);
                    while (citySelect.options.length > 1)
                        citySelect.remove(0);
                    while (areaSelect.options.length > 1)
                        areaSelect.remove(0);
                    var province = $(provinceSelect.selectedOptions).text();
                    if (province != "省份") {
                        // 将地址解析结果显示在地图上,并调整地图视野
                        myGeo.getPoint(province, function (point) {
                            if (point) {
                                map.centerAndZoom(point, 7);
                            } else {
                                alert("您选择地址没有解析到结果!");
                            }
                        }, province);
                        $.ajax({
                            url: 'http://localhost:8080/city/getCityList.do',
                            dataType: 'json',
                            type: 'post',
                            data: {parentCode: provinceSelect.value},
                            success: function (data) {
                                for (var i = 0; i < data.length; i++)
                                    citySelect.add($('<option value ="' + data[i].CODE + '">' + data[i].NAME + '</option>')[0], citySelect.options.length - 1);
                            }
                        });
                    }
                }
            });
            citySelect = new Dropkick("#citySelect", {
                change: function () {
                    map.removeOverlay(marker);
                    while (areaSelect.options.length > 1)
                        areaSelect.remove(0);
                    var city = $(citySelect.selectedOptions).text();
                    var province = $(provinceSelect.selectedOptions).text();
                    if (city != "城市") {
                        // 将地址解析结果显示在地图上,并调整地图视野
                        myGeo.getPoint(province + city, function (point) {
                            if (point) {
                                map.centerAndZoom(point, 10);
                            } else {
                                alert("您选择地址没有解析到结果!");
                            }
                        }, city);
                        $.ajax({
                            url: 'http://localhost:8080/city/getCityList.do',
                            dataType: 'json',
                            type: 'post',
                            data: {parentCode: citySelect.value},
                            success: function (data) {
                                for (var i = 0; i < data.length; i++)
                                    areaSelect.add($('<option value ="' + data[i].CODE + '">' + data[i].NAME + '</option>')[0], areaSelect.options.length - 1);
                            }
                        });
                    }
                }
            });
            areaSelect = new Dropkick("#areaSelect", {
                change: function () {
                    map.removeOverlay(marker);
                    var area = $(areaSelect.selectedOptions).text();
                    var city = $(citySelect.selectedOptions).text();
                    var province = $(provinceSelect.selectedOptions).text();
                    if (area != "区县") {
                        myGeo.getPoint(province + city + area, function (point) {
                            if (point) {
                                map.centerAndZoom(point, 12);
                            } else {
                                alert("您选择地址没有解析到结果!");
                            }
                        }, city);
                    }
                }
            });
            $.ajax({
                url: 'http://localhost:8080/city/getCityList.do',
                dataType: 'json',
                type: 'post',
                data: {},
                success: function (data) {
                    for (var i = 0; i < data.length; i++)
                        provinceSelect.add($('<option value ="' + data[i].CODE + '">' + data[i].NAME + '</option>')[0], provinceSelect.options.length - 1);
                }
            });

            $('#searchAddress').click(function () {
                var area = $(areaSelect.selectedOptions).text();
                var city = $(citySelect.selectedOptions).text();
                var province = $(provinceSelect.selectedOptions).text();
                var addressDetail = $('#addressDetail').val();
                if (province == '省份') {
                    alert('请先选择省份');
                    return;
                }
                if (city == '城市') {
                    alert('请先选择城市');
                    return;
                }
                if (area == '区县') {
                    alert('请先选择区县');
                    return;
                }
                if (addressDetail == '') {
                    alert('请填入详细地址');
                    return;
                }
                myGeo.getPoint(province + city + area + addressDetail, function (point) {
                    if (point) {
                        map.removeOverlay(marker);
                        marker = new BMap.Marker(point);// 创建标注
                        map.centerAndZoom(point, 16);
                        map.addOverlay(marker);// 将标注添加到地图中
                        marker.openInfoWindow(markerWindow);
                        marker.ifOpenWindow = true;
                        marker.enableDragging();    //可拖拽
                        marker.addEventListener("dragend", function () {
                            this.openInfoWindow(markerWindow);
                        });
                        marker.addEventListener("click", function () {
                            if (marker.ifOpenWindow) {
                                this.openInfoWindow(markerWindow);
                            }
                        });
                    } else {
                        alert("您选择地址没有解析到结果!");
                    }
                }, city);
            });
        });

        function surePosition() {
            provinceSelect.disable();
            citySelect.disable();
            areaSelect.disable();
            $('#searchAddress').off('click');
            $('#addressDetail').prop('readonly', true);
            marker.disableDragging();
            marker.closeInfoWindow();
            marker.ifOpenWindow = false;
        }
    </script>
</head>
<body>

<div class="shopManageRightContainer">
    <h3 class="shop-h3">在地图上标注您的店铺</h3>
    <div class="shopManageOption">
        <div class="shopManageTitle">地址</div>
        <div class="shopManageContent">
            <select id="provinceSelect">
                <option>省份</option>
            </select>
            <select id="citySelect">
                <option>城市</option>
            </select>
            <select id="areaSelect">
                <option>区县</option>
            </select>
            <input type="text" name="addressDetail" id="addressDetail" placeholder="请务必填写真实信息"/>
            <input type="button" id="searchAddress" class="search-btn" value="搜索位置并标注">
            <p class="explain">
                此地址将用于定位店铺位置。城市请具体到街道号或门牌号，农村请具体到乡镇或村。<br>
                详细地址如：勒竹新村东乐路1号博展物流园，黄村镇大庄村丰顺路京南物流园。 </p>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="shopManageOption">
        <div class="shopManageTitle">定位</div>
        <div class="shopManageContent">
            <div id="map" style="width:100%;height:360px;border: 1px solid #d8d8db;"></div>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="shopManageOption">
        <div class="shopManageTitle">门店名称</div>
        <div class="shopManageContent">
            <input type="text" name="shopName" class="shopInput" id="shopName" placeholder="请填写真实的门店名称"/>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="shopManageOption">
        <div class="shopManageTitle">营业执照号</div>
        <div class="shopManageContent">
            <input type="text" name="shopLicenseNum" class="shopInput" id="shopLicense" placeholder="请填写营业执照号"/>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="shopManageOption identity-photo">
        <h3 class="shop-h3">
            提交资料
            <span class="shop-tip">（支持jpg、jpeg、bmp、gif格式图片，大小不超过2M）</span>
        </h3>
        <div>
            <h4 class="shop-h4">
                1、营业执照照片
                <span class="shop-tip">（请上传营业执照原件，保证文字清晰可辨认,微店店主需要与证照主体一致）</span>
            </h4>
            <input type="file" name="shopLicensePhoto" id="shopLicensePhoto" class="upload-btn"/>
        </div>
        <div>
            <h4 class="shop-h4">
                2、门店外面照片
                <span class="shop-tip">（照片请包含完整店铺招牌、及店铺周边场景，内容需为实体零售店，企业厂房等无法通过审核。）</span>
            </h4>
            <input type="file" name="shopOuterPhoto" id="shopOuterPhoto" class="upload-btn"/>
        </div>
        <div>
            <h4 class="shop-h4">
                3、门店内营业现场照片
                <span class="shop-tip"></span>
            </h4>
            <input type="file" name="shopInnerPhoto" id="shopInnerPhoto" class="upload-btn"/>
        </div>
    </div>
</div>
</body>
</html>